<app-content-header
  [actionBgColor]="'#FFAE00'">
</app-content-header>

<app-detail-header
  [title]="'GENERAL.INFO.OTHER.BASIC' | i18n"
  [ifEditable]="false"
></app-detail-header>


<div class="cil__info-item-blocks bottom-columns">
  <app-info-row
    [columns]="firstColumns"
    [height]="'160'"
  ></app-info-row>
</div>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row
    [columns]="secondColumns"
    [height]="'160'"
  ></app-info-row>
</div>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row
    [columns]="thirdColumns"
  ></app-info-row>
</div>

<app-detail-header
  [title]="'GENERAL.INFO.OTHER.DETAIL' | i18n"
  [ifEditable]="false"
></app-detail-header>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row
    [columns]="acquirerColumns"
  ></app-info-row>
</div>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row
    [columns]="groupColumns"
  ></app-info-row>
</div>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row
    [columns]="merchantColumns"
  ></app-info-row>
</div>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row
    [columns]="storeColumns"
  ></app-info-row>
</div>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row
    [columns]="otherInfoColumns"
  ></app-info-row>
</div>

<ng-template #payUrl let-column="column">
  <div>
    <a [href]="column.value" target="_blank" [title]="column.value">{{ column.value }}</a>
    <button 
      class="copy"
      nz-button
      nzType="primary"
      nz-tooltip
      (click)="copyUrl(column.value)"
      [nzTitle]="'GENERAL.INFO.OTHER.COPY_URL' | i18n">
      <i nz-icon nzType="copy"></i>
    </button>
  </div>
</ng-template>

<app-detail-header
  [title]="'TRADE.RELATED_TRADES' | i18n"
  [ifEditable]="false"
></app-detail-header>

<div class="cil-table-block">
  <st
    #st
    [scroll]="scroll"
    [data]="tradeList"
    [columns]="columns"
    [widthMode]="widthMode"
    [loading]="loading"
    [page]="page"
  >
    <ng-template st-row="amount" let-item>
      <span>{{ item.amount | amtFormat:item.currency | async }}</span>
    </ng-template>
    <ng-template st-row="transScene" let-item>
      <span>{{ item.transScene | i18nPrefixWith: 'TRANS_SCENE.' }}</span>
    </ng-template>
    <ng-template st-row="transAmt" let-item>
      <span>{{item.transAmt + ' ' + item.currency}}</span>
    </ng-template>
  </st>
</div>